<template>
  <view class="app-container">
    <!-- 背景装饰 -->
    <view class="background-decoration">
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>

    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">工作流提交</text>
        <text class="page-subtitle">选择表单类型开始流程</text>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-card">
        <wd-input
          v-model="searchKeyword"
          placeholder="搜索表单名称..."
          clearable
          prefixIcon="search"
          class="search-input"
          @input="handleSearch"
        />
        <view class="search-stats">
          <text class="stats-text">共 {{ filteredFormList.length }} 个表单</text>
        </view>
      </view>
    </view>

    <!-- 表单列表 -->
    <view class="form-section">
      <view class="form-grid">
        <view
          class="form-card"
          v-for="(form, index) in filteredFormList"
          :key="index"
          @tap="tiaozhuan(form.path)"
          :class="{ 'card-active': activeCard === index }"
          @touchstart="setActiveCard(index)"
          @touchend="clearActiveCard"
        >
          <view class="card-header">
            <view class="icon-wrapper" :style="{ background: getCardColor(index) }">
              <wd-icon name="document" color="#ffffff" size="32rpx" />
              <view class="icon-glow" :style="{ background: getGlowColor(index) }"></view>
            </view>
            <view class="card-badge">
              <text class="badge-text">{{ getCategoryText(form.name) }}</text>
            </view>
          </view>
          <view class="card-content">
            <text class="form-title">{{ form.name }}</text>
            <text class="form-desc">{{ getFormDescription(form.name) }}</text>
          </view>
          <view class="card-footer">
            <view class="action-hint">
              <wd-icon name="arrow-right" color="#999999" size="20rpx" />
              <text class="hint-text">点击提交</text>
            </view>
          </view>
          <view class="card-ripple"></view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredFormList.length === 0">
        <view class="empty-icon">
          <wd-icon name="search" color="#CCCCCC" size="80rpx" />
        </view>
        <text class="empty-text">未找到相关表单</text>
        <text class="empty-desc">请尝试其他关键词</text>
      </view>
    </view>
  </view>
</template>
  
<script setup lang="ts">
  import { ref, computed } from 'vue'
  import taskIcon from '@/assets/images/task.png' 
  const searchKeyword = ref('')
  const activeCard = ref(-1)
  
  
  // 表单列表数据
  const formList = [
    { name: '令讯技术支持申请单', path: 'technicalsupport' },
    { name: '通用审批表', path: 'generalapproval' },
    { name: '到货验收单', path: 'arrivalacceptance' },
    { name: '费用报销单', path: 'expensereimbursement' },
    { name: '付款申请单', path: 'paymentapplication' },
    { name: '项目变更申请单', path: 'projectchange' },
    { name: '令讯印章使用申请单', path: 'stampapplication' },
    { name: '令讯立项申请单', path: 'projectapply' },
    // { name: '进度付款申请单', path: 'paymentprogress' },
    { name: '合同提报表', path: 'contractsubmission' },
    { name: '付款计划单', path: 'paymentplan' },
    { name: '差旅费报销单', path: 'travelaccount' },
    { name: '采购请购表', path: 'buyapply' },
    // { name: '供应商选定审批单', path: 'supplierselection' },
    { name: '招标申请表', path: 'bidapply' },
    { name: '令讯合同评审表', path: 'contractreview' },
    { name: '设备发货前验收报告', path: 'deliverybefore' },
    { name: '设备安装阶段验收报告', path: 'installationacceptance' },
    { name: '完工验收单', path: 'completionacceptance' },
    { name: '质保验收单', path: 'qualityacceptance' }
  ]
  
  // 过滤后的表单列表
  const filteredFormList = computed(() => {
    if (!searchKeyword.value) {
      return formList
    }
    return formList.filter(item => item.name.toLowerCase().includes(searchKeyword.value.toLowerCase()))
  })
  
  // 搜索处理
  const handleSearch = () => {
    // 这里只做本地过滤
  }
  
  // 跳转处理
  const tiaozhuan = (path: string) => {
    uni.navigateTo({
      url: `/pagesA/workflow/formpath/${path}?type=add`
    })
  }

  // 卡片交互
  const setActiveCard = (index: number) => {
    activeCard.value = index
  }

  const clearActiveCard = () => {
    activeCard.value = -1
  }

  // 获取卡片颜色
  const getCardColor = (index: number) => {
    const colors = [
      'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
      'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
      'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
      'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
      'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
    ]
    return colors[index % colors.length]
  }

  // 获取光晕颜色
  const getGlowColor = (index: number) => {
    const glowColors = [
      'radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%)',
      'radial-gradient(circle, rgba(240, 147, 251, 0.3) 0%, transparent 70%)',
      'radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%)',
      'radial-gradient(circle, rgba(67, 233, 123, 0.3) 0%, transparent 70%)',
      'radial-gradient(circle, rgba(250, 112, 154, 0.3) 0%, transparent 70%)',
      'radial-gradient(circle, rgba(168, 237, 234, 0.3) 0%, transparent 70%)'
    ]
    return glowColors[index % glowColors.length]
  }

  // 获取分类文本
  const getCategoryText = (name: string) => {
    if (name.includes('申请')) return '申请'
    if (name.includes('报销')) return '报销'
    if (name.includes('审批')) return '审批'
    if (name.includes('验收')) return '验收'
    if (name.includes('合同')) return '合同'
    return '表单'
  }

  // 获取表单描述
  const getFormDescription = (name: string) => {
    const descriptions: { [key: string]: string } = {
      '令讯技术支持申请单': '技术支持服务申请',
      '通用审批表': '通用业务审批流程',
      '到货验收单': '货物到达验收确认',
      '费用报销单': '日常费用报销申请',
      '付款申请单': '资金付款申请流程',
      '项目变更申请单': '项目变更管理',
      '令讯印章使用申请单': '公司印章使用申请',
      '令讯立项申请单': '新项目立项申请',
      '进度付款申请单': '项目进度付款',
      '合同提报表': '合同信息提报',
      '付款计划单': '付款计划制定',
      '差旅费报销单': '差旅费用报销',
      '采购请购表': '物资采购申请',
      '供应商选定审批单': '供应商选择审批',
      '招标申请表': '项目招标申请',
      '令讯合同评审表': '合同评审流程',
      '设备发货前验收报告': '设备发货前检验',
      '设备安装阶段验收报告': '设备安装验收',
      '完工验收单': '项目完工验收',
      '质保验收单': '质量保证验收'
    }
    return descriptions[name] || '工作流程表单'
  }
</script>
  
<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow-x: hidden;
}

/* 背景装饰 */
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 200rpx;
  height: 200rpx;
  top: 10%;
  right: -50rpx;
  animation-delay: 0s;
}

.circle-2 {
  width: 150rpx;
  height: 150rpx;
  top: 60%;
  left: -30rpx;
  animation-delay: 2s;
}

.circle-3 {
  width: 100rpx;
  height: 100rpx;
  top: 30%;
  left: 50%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20rpx) rotate(180deg); }
}

/* 页面头部 */
.page-header {
  padding: 80rpx 40rpx 40rpx;
  text-align: center;
  position: relative;
  z-index: 2;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.page-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  letter-spacing: 2rpx;
}

.page-subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

/* 搜索区域 */
.search-section {
  padding: 0 30rpx 30rpx;
  position: relative;
  z-index: 2;
}

.search-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.search-input {
  width: 100%;
  margin-bottom: 20rpx;
}

.search-stats {
  display: flex;
  justify-content: center;
}

.stats-text {
  font-size: 24rpx;
  color: #999999;
  font-weight: 500;
}

/* 表单区域 */
.form-section {
  padding: 0 30rpx 40rpx;
  position: relative;
  z-index: 2;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
  gap: 30rpx;
}

/* 表单卡片 */
.form-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.form-card:hover {
  transform: translateY(-8rpx) scale(1.02);
  box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}

.form-card.card-active {
  transform: translateY(-4rpx) scale(0.98);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
  position: relative;
}

.icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  z-index: -1;
}

.card-badge {
  background: rgba(102, 126, 234, 0.1);
  border: 1rpx solid rgba(102, 126, 234, 0.2);
  border-radius: 12rpx;
  padding: 8rpx 16rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #667eea;
  font-weight: 600;
}

/* 卡片内容 */
.card-content {
  margin-bottom: 25rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: block;
}

.form-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.5;
  display: block;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.action-hint {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.hint-text {
  font-size: 22rpx;
  color: #999999;
  font-weight: 500;
}

/* 点击波纹效果 */
.card-ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.form-card:active .card-ripple {
  opacity: 1;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  text-align: center;
}

.empty-icon {
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  margin-bottom: 10rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.7);
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .page-header {
    padding: 60rpx 30rpx 30rpx;
  }

  .page-title {
    font-size: 42rpx;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 20rpx;
  }

  .form-card {
    padding: 25rpx;
  }

  .icon-wrapper {
    width: 70rpx;
    height: 70rpx;
  }

  .form-title {
    font-size: 28rpx;
  }
}

/* 动画增强 */
.form-card {
  animation: slideInUp 0.6s ease-out;
}

.form-card:nth-child(1) { animation-delay: 0.1s; }
.form-card:nth-child(2) { animation-delay: 0.2s; }
.form-card:nth-child(3) { animation-delay: 0.3s; }
.form-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>